<template>
	<div class="login-bg padding-across-10">
		<!-- <div class="time" style="width: 100%;">
			<span style="float: right;margin-right: 1rem;color: #fff;">{{time}}</span>
		</div> -->
		<div class="main_content">
			<el-row :gutter="8">
				<el-col :span="8">
					<div class="bg-purple" style="height: 180px;">
						<el-form v-if="!hasLogin" ref="loginForm" :rules="loginRules" :label-position="'right'" :model="loginForm" style="padding-top:20px;width:80%;margin:auto;">
							<el-form-item prop="loginname">
								<el-input placeholder="读者证号" autocomplete="off" id="loginname" v-model="loginForm.loginname" icon="eleg-icon_profile"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input placeholder="密码" autocomplete="off" id="loginpassword" type="password" v-model="loginForm.password" icon="eleg-icon_lock" @keyup.enter.native="login('loginForm')"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button id="submit" type="primary" size="small" @click="login('loginForm')" style="width:100%;"><i class="el-icon el-icon-loading el-icon--left" v-if="loading"></i>{{$t('message.loginSubmit')}}</el-button>
							</el-form-item>
						</el-form>
						<div v-else class="detail-section">
							<div class="section-left">
								<i class="fa fa-user-circle-o fa-5x"></i>
							</div>
							<div class="section-right">
								<div>
									<small>姓名：{{readerInfo.name}}</small>
								</div>
								<div>
									<small>读者证号：{{readerInfo.code}}</small>
								</div>
								<div>
									<small>身份：{{readerInfo.role}}</small>
								</div>
								<div>
									<small>
      									<a style="text-decoration:underline;cursor: pointer;color :red" @click="loginOut">注销</a></small>
									<small>|</small>
									<small><a style="text-decoration:underline;cursor: pointer;color :#20A0FF" @click="changePwd">修改密码</a></small>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="bg-purple" style="height: 180px">
						<div class="section-top">
							<el-input v-model="searchModel" placeholder="请输入检索信息" style="padding-top:55px;width:90%;padding-left: 80px" @keyup.enter.native="findBook">
								<el-button slot="append" icon="search" @click="findBook"></el-button>
							</el-input>
						</div>
						<div class="section-bottom">
							<el-radio-group v-model="status" style="padding-left: 80px;padding-top: 20px">
								<el-radio :label="0">书名/作者</el-radio>
								<el-radio style="margin-left: 30px;" :label="1">条码</el-radio>
								<el-radio style="margin-left: 30px;" :label="2">标签</el-radio>
							</el-radio-group>
						</div>
					</div>
				</el-col>
				<el-col :span="12" style="margin-top: 10px;">
					<div class="bg-purple">
						<div class="panel-title">
							<span><i class="fa fa-book" style="margin-right: 5px"></i>新书推荐</span>
							<span style="font-size: 10px;cursor: pointer" @click="goNewBook">更多>></span>
						</div>
						<div class="inner-section">
							<template v-if="newBookDatas && newBookDatas.length > 0" v-for="item in newBookDatas">
								<div class="content">
									<span class="content_readername">{{item.Name}}</span>
									<span class="content_readerdes">{{item.BindTime}}</span>
								</div>
							</template>
							<div v-else style="text-align: center;padding-top: 10px;">
								<h2>暂无新书推荐信息</h2>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12" style="margin-top: 10px;">
					<div class="bg-purple">
						<div class="panel-title">
							<span><i class="fa fa-comments" style="margin-right: 5px"></i>通知公告</span>
							<span style="font-size: 10px;cursor: pointer" @click="goMoreNotice">更多>></span>
						</div>
						<div class="inner-section">
							<template v-if="noticeDatas && noticeDatas.length > 0" v-for="item in noticeDatas">
								<div class="content">
									<span class="content_title" @click="editText(item)">{{item.Title}}</span>
									<span class="content_content">{{item.Content}}</span>
									<span class="content_time">{{item.CreateTime}}</span>
								</div>
							</template>
							<div v-else style="text-align: center;padding-top: 10px;">
								<h2>暂未发布通知公告</h2>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 修改密码 -->
		<el-dialog title="修改密码" v-model="changePasswordDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form id="form" ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item :label="$t('message.oldPassword')" prop="OldPassword">
					<el-input v-model="form.OldPassword" type="password" required name="OldPassword" id="OldPassword"></el-input>
				</el-form-item>
				<el-form-item :label="$t('message.newPassword')" prop="NewPassword">
					<el-input v-model="form.NewPassword" type="password" required name="NewPassword" id="NewPassword"></el-input>
				</el-form-item>
				<el-form-item :label="$t('message.confirmPassword')" prop="CheckPwd">
					<el-input v-model="form.CheckPwd" type="password" required name="CheckPwd" id="CheckPwd"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="changePasswordDialog = false">取 消</el-button>
				<el-button type="danger" @click="resetForm">清 空</el-button>
				<el-button type="primary" @click="confirmChangePassword('form')">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 通告详情 -->
		<el-dialog title="通知公告" v-model="editAdDialog" :class="[dialog-small-width]">
			<el-form id="form" ref="createForm" :model="editForm" :rules="createRules" label-width="80px">
				<el-form-item label="标题" prop="title">
					<span>{{editForm.title}}</span>
				</el-form-item>
				<el-form-item label="内容" prop="text">
					<span>{{editForm.text}}</span>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../assets/js/common.js'
	export default {
		data() {
			var validateLoginName = (rule, value, callback) => {
				if(!value) {
					callback(new Error('读者证号不能为空'));
				} else {
					callback();
				}
			};
			var validatePassword = (rule, value, callback) => {
				if(!value) {
					callback(new Error(this.$t('message.passwordRule')));
				} else {
					callback();
				}
			};
			//密码验证
			var create_checkPassword = (rule, value, callback) => {
				if(this.form.OldPassword === '') {
					callback(new Error('新密码不能为空'));
				} else if(!((/^[0-9a-zA-Z_]{6,20}$/).test(this.form.OldPassword))) {
					callback(new Error('密码必须为6-20位数字、字母或下划线'));
				} else {
					callback();
				}
			};
			//再次输入密码验证
			var create_checkPass = (rule, value, callback) => {
				if(this.form.CheckPwd === '') {
					callback(new Error('请再次输入新密码'));
				} else if(this.form.CheckPwd !== this.form.NewPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				sysVersion: '',
				editAdDialog: false,
				editForm: {
					title: '',
					text: '',
				},
				loading: false,
				hasLogin: false, //是否已登录
				status: 0,
				searchModel: '',
				bookDatas: [],
				changePasswordDialog: false,
				newBookDatas: [],
				noticeDatas: [],
				readerInfo: {},
				loginForm: {
					loginname: "",
					password: ""
				},
				loginRules: {
					loginname: [{
						validator: validateLoginName,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePassword,
						trigger: 'blur'
					}]
				},
				form: {
					OldPassword: "",
					NewPassword: "",
					CheckPwd: ""
				},
				rules: {
					OldPassword: [{
						required: true,
						trigger: 'blur',
						message: this.$t('message.oldPasswordRule')
					}],
					NewPassword: [{
						required: true,
						validator: create_checkPassword,
						trigger: 'blur'
					}],
					CheckPwd: [{
						required: true,
						validator: create_checkPass,
						trigger: 'blur'
					}]
				},
			}
		},
		methods: {
			editText(row) {
				this.editAdDialog = true;
				this.editForm = {
					title: row.Title,
					text: row.Content
				}
			},
			login(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.loading = true;
						var param = {
							readercode: this.loginForm.loginname,
							tag: '',
							password: this.loginForm.password,
							DeviceSn: ""
						}
						HttpServer.httpPost2.call(this, '/Api/Reader/Login', param, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.hasLogin = true;
								this.readerInfo.name = response.data.name;
								this.readerInfo.code = response.data.readercode;
								this.readerInfo.role = response.data.type;
								GloabFun.setReaderCode(response.data.readercode);
								GloabFun.setReaderKeyid(response.data.keyid);
								GloabFun.setReaderName(response.data.name);
								GloabFun.setReaderRole(response.data.type);
							} else {
								this.$message({
									type: 'error',
									message: response.data.msg
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			loginOut() {
				this.$confirm('确认退出当前账号？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					GloabFun.clearReaderLoginInfo();
					this.searchModel = '';
					this.status = 0;
					this.hasLogin = false;
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '操作取消'
					});
				});
			},
			//更多新书推荐
			goNewBook() {
				this.$emit('changeView', 'NewBook', {})
			},
			//更多通知公告
			goMoreNotice() {
				this.$emit('changeView', 'Announcement', {})
			},
			findBook() {
				this.$emit('changeView', 'BookManagement', {
					searchModel: this.searchModel,
					value: this.status
				})
			},
			changePwd() {
				this.changePasswordDialog = true;
			},
			resetForm() {
				this.form = {
					OldPassword: "",
					NewPassword: "",
					CheckPwd: ""
				};
			},
			//确认修改密码
			confirmChangePassword(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var param = {
							readercode: GloabFun.getReaderCode(),
							oldpassword: this.form.OldPassword,
							newpassword: this.form.NewPassword
						}
						HttpServer.httpPost.call(this, '/Api/Reader/UpdatePsw', param, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$message({
									type: "success",
									message: '密码修改成功，请重新登录'
								});
								GloabFun.clearReaderLoginInfo();
								this.hasLogin = false;
							} else {
								this.$message({
									type: "error",
									message: '操作失败'
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			formateDate(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BindTime.indexOf("T");
					array[i].BindTime = array[i].BindTime.substring(0, index1) + " " + array[i].BindTime.substring(index1 + 1, index1 + 9);
				}
			},
			formateData2(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].CreateTime.indexOf("T");
					array[i].CreateTime = array[i].CreateTime.substring(0, index1) + " " + array[i].CreateTime.substring(index1 + 1, index1 + 9);
				}
			},
			getNewBookDatas() {
				HttpServer.httpGet.call(this, '/Api/Book/Info/NewBook?index=1&pageSize=10', function(response) {}, function(response) {
					console.log(response)
					if(response.data.code === 0) {
						this.formateDate(response.data.info);
						this.newBookDatas = response.data.info;
					} else {
						this.$message.error(response.data.msg);
					}
				})
			},
			getNoticeDatas() {
				HttpServer.httpGet.call(this, '/Api/Notice/Info?page=1&size=10&examine=true', function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.formateData2(response.data.info);
						this.noticeDatas = response.data.info;
					} else {
						this.$message.error(response.data.msg);
					}
				});
			},
		},
		created() {
			if(GloabFun.getReaderCode() != '') {
				this.hasLogin = true;
				this.readerInfo.name = GloabFun.getReaderName();
				this.readerInfo.code = GloabFun.getReaderCode();
				this.readerInfo.role = GloabFun.getReaderRole();
			}
			this.getNewBookDatas();
			this.getNoticeDatas();
		}
	}
</script>
<style lang="less">
	* {
		box-sizing: border-box;
	}
</style>
<style scoped>
	@import '../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style lang="less" scoped>
	.login-bg {
		height: 100%;
		.main_content {
			width: 100%;
			.el-row {
				.bg-purple {
					// background-color: #f6f6f1;
					width: 100%;
					background-color: #fff;
					border-radius: 10px;
					.el-row {
						.panel-title2 {
							font-size: 15px;
							width: 100%;
							padding-top: 5px;
							padding-left: 10px;
							color: #20a0ff;
							font-weight: bold;
						}
						.content2 {
							text-align: center;
							border-radius: 3px;
							margin-top: 10%;
							padding: 0 10px;
						}
					}
					.panel-title {
						font-size: 15px;
						width: 100%;
						padding: 10px 20px;
						color: #20a0ff;
						font-weight: bold;
						display: flex;
						justify-content: space-between;
					}
					.inner-section {
						min-height: 430px;
						overflow: auto;
						font-size: 16px;
						.content {
							width: 100%;
							border-radius: 3px;
							display: flex;
							justify-content: space-between;
							padding: 10px 20px;
							.content_address {
								width: 35%;
							}
							.content_phone {
								width: 65%;
							}
							.content_readername {
								width: 45%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.content_readerdes {
								width: 55%;
								text-align: right;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.content_title {
								text-decoration: none;
								width: 20%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.content_title:hover {
								cursor: pointer;
								color: #20a0ff;
								text-decoration: underline;
								width: 20%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.content_content {
								width: 35%;
								text-align: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.content_time {
								width: 45%;
								text-align: right;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
					.detail-section {
						width: 100%;
						height: 180px;
						display: flex;
						justify-content: space-around;
						.section-left {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: center;
							width: 40%;
							height: 100%;
						}
						.section-right {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							width: 60%;
							height: 100%;
							padding: 3px;
						}
						.section-top {
							display: flex;
							justify-content: space-around;
							text-align: center;
							width: 100%;
							height: 50%;
						}
						.section-bottom {
							text-align: left;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							width: 100%;
							height: 50%;
						}
					}
				}
			}
		}
	}
</style>